<template>
  <div class="promote-search-page">
    <div class="top-search-box">
      <div class="search-select-box">
        <el-select v-model="searchMap.keyStatus" placeholder="关键词状态">
          <el-option
            v-for="item in keyList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-input-box">
        <el-input
          v-model="searchMap.searchKey"
          placeholder="搜索关键词"
        ></el-input>
      </div>
      <el-button type="primary" @click="hkStartSearch">筛选</el-button>
    </div>
    <div class="bottom-search-box" v-if="userInfo.role==2">
      <div v-if="0" class="bottom-left-search-box">
        <el-select
          class="search-select"
          v-model="selectIndex"
          placeholder="操作"
        >
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary">确定</el-button>
      </div>
      <div class="bottom-right-search-box">
        <el-button type="primary" @click="hkAddNewKey">+新增关键词</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { keyStatusList, tagStatusList } from "@/utils/tools";
import {mapGetters} from "vuex"

export default {
  components: {},
  props: {
    activeName: ""
  },
  data() {
    return {
      searchMap: {
        keyStatus: "0",
        searchKey: ""
      },
      selectIndex: "0",
      keyList: keyStatusList,
      selectList: [
        {
          value: "0",
          label: "删除"
        },
        {
          value: "1",
          label: "启用"
        },
        {
          value: "2",
          label: "禁用"
        }
      ]
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    hkAddNewKey() {
      this.$bus.emit("showKey", {
        showType: 1
      });
    },
    //开始筛选
    hkStartSearch() {
      this.$emit("search", this.searchMap);
    }
  },
  created() {},
  mounted() {
    this.keyList = keyStatusList;
  }
};
</script>
<style lang="scss" scoped>
.top-search-box {
  display: flex;
  align-items: center;
  .search-input-box,
  .search-select-box {
    margin-right: 20px;
    .el-select {
      width: 120px;
    }
    .el-input {
      width: 300px;
    }
  }
}
.bottom-search-box {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search-select {
    margin-right: 20px;
    width: 80px;
  }
}
</style>
